<template>
  <div class="reward-regist">

    <div class="reward-con">
      <div class="date-box">
        <div class="date-con">
          <img src="./left.png" class="pic1" @click="preMonth" onclick="return false"/>
          <datetime format="YYYY-MM" v-model="month" class="date-time" :end-date="date"
                    @on-confirm="onConfirm"></datetime>
          <img src="./right.png" class="pic2" @click="nextMonth" onclick="return false"/>
        </div>
      </div>

      <div class="total-box">
        <span class="day">{{entryMonth}}</span>
        <span class="money">到账总计：{{arriveTotal}}元</span>
      </div>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad" class="list-award"
    >
      <div class="list-box" v-for="(item,index) in relationList" :key="index">
        <div class="list-con">
          <div class="content-box">
            <span class="title1">{{item.userName}}</span>
            <span class="title2">{{item.userTel}}</span>
            <span class="title3" v-if="item.status != 2">未到账：{{item.relationMoney}}元</span>
            <span class="title4" v-else>{{item.relationMoney}}元</span>
          </div>
          <div class="remark-box">
            <span class="title5">备注：{{item.remark}}</span>
            <div class="note-box" @click="note(item.id)">
              <img src="./note.png" class="note" onclick="return false"/>
            </div>
          </div>
        </div>
      </div>
    </van-list>

    <div class="empty-wrap" v-if="relationList.length == 0 && !loading">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">暂无相关记录~</div>
      </div>
    </div>

    <div class="award-modal" v-show="showAward" @click="closeModal"></div>
    <div class="award-box" v-show="showAward">
      <div class="title">编辑备注</div>
      <div class="award-con">
        <div class="name-box">
          <input type="text" placeholder="请填写备注" v-model="noteVal" class="name" maxlength="10" @blur="inputBlur"/>
        </div>
      </div>
      <div class="press-box">
        <button type="button" class="confirm" @click="remark">确定</button>
      </div>
    </div>

  </div>

</template>

<script>
  import {getYearMonth, formatDate, getPreMonth, getNextMonth, toDecimal} from "../../common/js/util"
  import {baseUrl} from "../../common/js/env";
  import {Datetime} from 'vux';

  export default {
    inject: ['reload'],
    data() {
      return {
        month: getYearMonth(),
        currentPage: 1,
        PageSize: 20,
        userSign: "",
        relationList: [],
        date: "",
        showAward: false,
        entryMonth: "",
        loading: false,
        finished: false,
        arriveTotal: "",
        noteVal: "",
        id: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
      this.date = formatDate(new Date(), "yyyy-MM-dd");
      this.entryMonth = `${this.month.substr(0, 4)}年${this.month.substr(5, 2)}月`;
    },
    methods: {
      onLoad() {//异步更新数据
        setTimeout(() => {
          this.queryList();
        }, 500);
      },
      queryList() {//查询邀请入职奖励列表
        this.axios.get(baseUrl + "/invite/get_on_work?sgin=" + this.userSign + "&page=" + this.currentPage + "&size=" + this.PageSize + "&time=" + this.month + "&type=1").then((res) => {
          let prizeObj = res.data;
          if (prizeObj.code == 0 && prizeObj.data != null) {
            this.arriveTotal = toDecimal(prizeObj.data.totalMoney);//已到账奖励金
            if (prizeObj.data.relationList != null && prizeObj.data.relationList.length > 0) {
              this.relationList = this.relationList.concat(prizeObj.data.relationList);
              //加载状态结束
              this.loading = false;
              this.currentPage++;
            } else {
              this.loading = false;
              if (this.relationList.length >= prizeObj.data.relationList.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(prizeObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      closeModal() {
        this.showAward = false;
      },
      remark() {//编辑
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.post(baseUrl + "/invite/update_relation_reg?sgin=" + this.userSign + "&remark=" + this.noteVal + "&id=" + this.id).then((res) => {
          let resultObj = res.data;
          this.showAward = false;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {
              this.$vux.toast.text("编辑备注失败，请重试", "middle");
              return;
            } else {
              this.initVanList();
              this.queryList(this.month);
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      onConfirm(value) {
        this.entryMonth = `${value.substr(0, 4)}年${value.substr(5, 2)}月`;
        this.initVanList();
        this.queryList(value);
      },
      preMonth() {//上一月
        this.month = getPreMonth(this.month);
        this.entryMonth = `${this.month.substr(0, 4)}年${this.month.substr(5, 2)}月`;
        this.initVanList();
        this.queryList(this.month);
      },
      nextMonth() {//下一月
        if (this.month == getYearMonth()) {
          return;
        }
        this.month = getNextMonth(this.month);
        this.entryMonth = `${this.month.substr(0, 4)}年${this.month.substr(5, 2)}月`;
        this.initVanList();
        this.queryList(this.month);
      },
      initVanList() {
        this.currentPage = 1;
        this.PageSize = 20;
        this.relationList = [];
        this.loading = true;
        this.finished = false;
      },
      note(id) {
        this.id = id;
        this.showAward = true;
      }
    },
    components: {
      Datetime
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .reward-regist
    wh(100%, 100%)
    background: rgba(245, 245, 245, 1)
    .reward-con
      position: fixed
      top: 0
      wh(100%, 2.8rem)
      z-index: 95
      .date-box
        fj(center, center)
        wh(100%, 1.2rem)
        background: rgba(60, 175, 255, 1)
        .date-con
          fj(center, center)
          .pic1
            wh(0.4rem, 0.4rem)
          .date-time
            padding-right: 0.32rem
            padding-left: 0.32rem
            size-color(0.427rem, rgba(255, 255, 255, 1))
          .date-time >>> .vux-cell-value
            size-color(0.507rem, rgba(255, 255, 255, 1))
          .pic2
            wh(0.4rem, 0.4rem)
      .total-box
        fj(space-between, center)
        wh(100%, 1.6rem)
        background: rgba(255, 255, 255, 1)
        .day
          margin-left: 0.333rem
          size-color(0.427rem, rgba(51, 51, 51, 1))
          font-weight: 500
        .money
          margin-right: 0.333rem
          size-color(0.4rem, rgba(60, 175, 255, 1))
          font-weight: 500
    .list-award
      margin-top: 0.267rem
      position: absolute
      top: 2.8rem
      wh(100%, auto)
      .list-box
        wh(100%, auto)
        background: rgba(255, 255, 255, 1)
        .list-con
          display: flex
          flex-direction: column
          justify-content: center
          wh(100%, 1.76rem)
          border-bottom: 0.027rem solid rgba(245, 245, 245, 1)
          .content-box
            display: flex
            align-items: center
            padding-bottom: 0.173rem
            .title1
              margin-left: 0.333rem
              margin-right: 0.333rem
              size-color(0.4rem, rgba(51, 51, 51, 1))
            .title2
              size-color(0.373rem, rgba(102, 102, 102, 1))
            .title3
              margin-left: auto
              margin-right: 0.333rem
              size-color(0.373rem, rgba(255, 83, 83, 1))
            .title4
              margin-left: auto
              margin-right: 0.333rem
              size-color(0.4rem, rgba(60, 175, 255, 1))
              font-weight: 500
          .remark-box
            display: flex
            align-items: center
            padding-top: 0.173rem
            .title5
              margin-left: 0.333rem
              margin-right: 0.307rem
              size-color(0.347rem, rgba(153, 153, 153, 1))
            .note-box
              wh(0.32rem, 0.32rem)
              .note
                wh(100%, 100%)

    .award-modal
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 98
      display: flex
      align-items: center
      justify-content: center
      background-color: rgba(0, 0, 0, 0.5)
    .award-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 98
      margin: auto
      wh(8rem, 4.72rem)
      background: rgba(255, 255, 255, 1)
      border-radius(0.173rem)
      .title
        padding-top: 0.64rem
        padding-bottom: 0.64rem
        text-align: center
        size-color(0.48rem, rgba(51, 51, 51, 1))
        font-weight: 500
      .award-con
        display: flex
        align-items: center
        padding-bottom: 0.4rem
        justify-content: center
        .name-box
          display: flex
          align-items: center
          wh(6.88rem, 0.96rem)
          border: 0.027rem solid rgba(224, 224, 224, 1)
          border-radius(0.16rem)
          .name
            padding-left: 0.1rem
            wh(90%, 0.6rem)
            line-height: 0.6rem
            size-color(0.44rem, rgba(147, 147, 147, 1))
      .press-box
        margin: 0 auto
        wh(6.933rem, 1.067rem)
        .confirm
          background: rgba(60, 175, 255, 1)
          border-radius(0.16rem)
          wh(6.933rem, 1.067rem)
          line-height: 1.067rem
          text-align: center
          size-color(0.453rem, rgba(255, 255, 255, 1))
    .empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 2.8rem
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
</style>
